<template>
	<div class="container">
		<div class="tip" v-if="tip">
			<span class="icon">
				<img src="../../assets/img/tip.png" alt="" />
			</span> <span class="text">{{ tip }}</span>
		</div>
		<form @submit.prevent="submitForm">
			<div class="form-content">
				<div class="form-group" v-for="item in fields" :key="item.id">
					<label :for="item.tableKey">{{ item.name }}</label> <input type="text" :id="item.tableKey"
						v-model="formData[item.tableKey]" :placeholder="`请输入${item.name}`" required />
				</div>
			</div>
			<button class="submit-btn" type="submit">查看额度</button>
		</form>
	</div>
	<TipDialog ref="dialogRef" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import * as api from '../../api/index';
import TipDialog from '../../components/Dialog.vue';
import eventBus from '../../utils/eventBus.ts';

const formData = ref<api.QuotaInfo>({
	companyName: '',
	legalPerson: '',
	companyNo: '',
	bankNo: '',
	bankName: '',
	bankPhone: '',
	quotaAmount: '',
	qrCodeId: ''
});

const submitForm = () => {
	api.save(formData.value).then(res => {
		window.location.href = './detail.html?id=' + res.id;
	});
};

const query = Object.fromEntries(new URL(window.location.href).searchParams);
const id = query.id;
window.localStorage.setItem('qrcode', id)
const dialogRef = ref();
const tip = ref('');

const fields = ref<api.Field[]>([]);

async function init() {
	if (!id) {
		alert('二维码不存在');
		return;
	}
	formData.value.qrCodeId = id;
	await api.getQrCodeById(id);
	tip.value = await api.getTipByCode('code1').then(res => res.content);
	fields.value = await api.getFields().then((res) => res.rows.filter((item) => item.showStatus));
}

init();

eventBus.on('message', (msg: string) => {
	dialogRef.value.show({ content: msg });
});
</script>

<style lang="less" scoped>
.container {
	margin: 10px 16px;

	.tip {
		background: linear-gradient(180deg, #E9F0F9 0%, #D8EAFF 100%);
		color: #4492fe;
		font-size: 12px;
		height: 30px;
		border-radius: 30px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;

		.icon {
			width: 30px;
			height: 30px;
			background: linear-gradient(180deg, #C2DBFD 0%, #82B5FE 100%);
			border-radius: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			flex-shrink: 0;

			img {
				width: 17px;
				height: 17px;
			}
		}

		.text {
			flex-grow: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 10px;
		}
	}

	.form-content {
		background-color: #ffffff;
		padding: 0 14px;
		border-radius: 12px;

		.form-group {
			height: 50px;
			border-bottom: 1px solid #DFE1E5;
			display: flex;
			align-items: center;

			&:last-child {
				border-bottom: 0;
			}

			label {
				display: inline-block;
				width: 120px;
				flex-shrink: 0;
			}

			input {
				height: 40px;
				flex-grow: 1;
				border: 0;

				&::placeholder {
					color: #DFE1E5;
				}
			}

			&:has(input[required])::before {
				content: '*';
				color: red;
			}
		}
	}

	.submit-btn {
		display: block;
		width: 100%;
		color: #ffffff;
		border-radius: 44px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border: 0;
		margin-top: 30px;
		background-color: #217DFE;
		overflow: hidden;
		font-weight: bold;
	}
}
</style>
